<template>
  <nav aria-label="Page navigation " v-if="articleNum>0" class="mt-4">

    <ul class="pagination justify-content-center">
      <li class="d-flex align-items-center mr-3 text-black-50">
        共{{articleNum}}条数据
      </li>
      <li class="page-item"  @click="page=1">
        <a class="page-link" href="#top" aria-label="Previous">
          <span aria-hidden="true">&laquo;</span>
          <span class="sr-only">Previous</span>
        </a>
      </li>
      <li class="page-item"  v-if="page-2>0"  @click="getTecBlogs(page-2)" ><a class="page-link" href="#top">{{page-2}}</a></li>
      <li class="page-item"  v-if="page-1>0"  @click="getTecBlogs(page-1)" ><a class="page-link" href="#top">{{page-1}}</a></li>
      <li class="page-item" @click="getTecBlogs(page)"  ><a class="page-link" href="#top" style="color: pink;">{{page}}</a></li>

      <li class="page-item" v-for="index of 3" :key='index' @click="getTecBlogs(page+index)" v-if="page+index<=pageCount" >
        <a class="page-link" href="#top">{{page+index}}</a>
       </li>
      <li  @click="page= pageCount">
        <a class="page-link" href="#top" aria-label="Next">
          <span aria-hidden="true">&raquo;</span>
          <span class="sr-only">Next</span>
        </a>
      </li>
    </ul>
  </nav>
</template>

<script>
  export default {
    data () {
      return {
        page:1,//当前页数


      }
    },
    props:['pageCount','articleNum'],

    methods:{
       getTecBlogs(page){

        this.page = page;
         this.$emit('getNewData', page);

       }
    }
  }
</script>

<style>
</style>
